<template>
    <div>

    </div>
</template>
<script setup>
/*
    This is a web-based visual array test.
    It is modelled after the visual array task described in Cowan et al (2006) [https://www.ncbi.nlm.nih.gov/pubmed/17489300].
    However, users can easily customize this test for their own purposes.
    Easily customizable variables have been listed below. For further changes to the test, knowledge of JavaScipt may be required.

    For smooth functioning of the test, make sure all the associated github files within the repository have been downloaded (especially the folder named 'jspsych-6.0.4').
    Results from this test will be automatically downloaded into the downloads folder of your desktop.

    For further details, please refer to the README.
*/

//----- CUSTOMIZABLE VARIABLES -----------------------------------------
var setSizes = [4, 6, 8, 10] // set sizes (number of squares displayed in different visual array trials)
var repSet = 15 // number of times each set size should be repeated
var randomize =
    true // present different set sizes in random order. if false, set sizes will be presented in ascending order
var stimuli_duration = 300 // number of miliseconds to display each stimuli
var recall_duration = null // number of miliseconds to allow recall. If null, there is no time limit.
var file_name =
    null // file name for data file. if null, a default name consisting of the participant ID and a unique number is chosen.
var local = false // save the data file locally.
// If this test is being run online (e.g., on MTurk), true will cause the file to be downloaded to the participant's computer.
// If this test is on a server, and you wish to save the data file to that server, change this to false.
// If changed to false, ensure that the php file (its in the directory!) and the empty "data" folder has also been appropriately uploaded to the server.
// Incase of problems, feel free to contact me :)

//----------------------------------------------------------------------

var stimuliArr = []
for (var i = 0; i < setSizes.length; i++) {
    for (var h = 1; h <= repSet; h++) {
        stimuliArr.push([setSizes[i], true])
    }
    for (var h = 1; h <= repSet; h++) {
        stimuliArr.push([setSizes[i], false])
    }
}

var stimuliDemoArray = [
    [1, true],
    [1, false],
    [6, false],
    [8, true]
]

if (randomize) {
    var stimuliArray = stimuliDemoArray
}
var n = -1

var p_details = {
    type: "survey-text",
    questions: [{
        prompt: "输入主题数量"
    }],
    on_finish: function () {
        var partN = jsPsych.data.get().last(1).values()[0].partNum
        partN = partN.replace(/['"]+/g, '')
        //      console.log(partN[0])
    }
}

var instructions = {
    type: 'instructions',
    pages: function () {
        var pageOne =
            '<div style="font-size:20px;"><b>说明</b><br><br>这是一个视觉数组任务. 在每一个试验, 你会看到一组4、6或8个方块. 然后您将看到一个测试集，其中包含一个正方形. 您必须标明圈出的正方形是否与原正方形的颜色相同.<br><br>如果颜色相同按“S”，如果颜色不同按“K”. <br><br><img src="img/instructions.png" style="width:550px; height:480px"></img><br><br>按“K”键下一页.</div>'
        var pageTwo =
            '<div style="font-size:20px;">我们现在将从演示试验开始，以确保您已经理解了任务. <br><br>记住: <br>按下 <b>"S"</b> 如果颜色是 <b>相同的</b>. <br>按下 <b>"K"</b> 如果颜色是 <b>不同的</b>.<br>为了快速执行，左手手指按“S”，右手手指按“K”.<br>请注意，原来的设置只会显示半秒.<br><br>按“K”继续.</div>'
        return [pageOne, pageTwo]
    },
    allow_backward: false,
    key_forward: "k"
}


var exp_instructions = {
    type: 'instructions',
    pages: function () {
        var pageOne =
            '<div style="font-size:20px;">我们现在从主要的试验开始. </b><br><br>记住: <br>按下 <b>"S"</b> 如果颜色是 <b>相同的</b>. <br>按下 <b>"K"</b> 如果颜色是 <b>不同的</b>.<br><br>如果您不理解本任务，请寻求研究助理的帮助.<br><br>如果你已经理解了任务，按“K”键开始试验.</div>'
        return [pageOne]
    },
    allow_backward: false,
    key_forward: "k"
}

var conclusion = {
    type: 'html-keyboard-response',
    stimulus: '<div style="font-size:20px;">任务结束了。感谢您参与这项工作. <br><br>请叫一下研究助理.</div>',
    choices: jsPsych.NO_KEYS
}

var fixation = {
    type: 'html-keyboard-response',
    stimulus: '<div style="font-size:40px;">+</div>',
    choices: jsPsych.NO_KEYS,
    trial_duration: 900
}

var reward = {
    type: "visual-array-stimuli",
    set_size: function () {
        //  console.log(stimuliArray[n][0])
        n += 1
        return stimuliArray[n][0]
    },
    target_size: [40, 40],
    trial_duration: stimuli_duration
}


var recall = {
    type: "visual-array-response",
    target_size: [40, 40],
    locs: function () {
        var h = jsPsych.data.get().last(2).values()[0].locations
        return h
    },
    cols: function () {
        var h = jsPsych.data.get().last(2).values()[0].colours
        return h
    },
    target_different: function () {
        return stimuliArray[n][1]
    }, on_start: function () {
        console.log(jsPsych.data.get().last(2).values());
    },
    trial_duration: recall_duration,
    on_finish: function (data) {
        console.log(data);
        // jsPsych.data.displayData(); // comment out if you do not want to display results at the end of task
    }
}

var feedback = {
    type: 'html-keyboard-response',
    stimulus: function () {
        var text = ""
        var accuracy = jsPsych.data.get().last(1).values()[0].correct
        if (accuracy) {
            text += '<div style="font-size:35px; color:rgb(0 130 0)"><b>Correct</div>'
        } else {
            text += '<div style="font-size:35px; color:rgb(180 0 0)"><b>Incorrect</div>'
        }
        //text += '<div style="font-size:30px; color:rgb(0 0 0)"><br><br>现在开始新试验.</div>'
        return text
    },
    choices: jsPsych.NO_KEYS,
    trial_duration: 1000,

}

function saveData(filename, filedata) {
    $.ajax({
        type: 'post',
        cache: false,
        url: 'save_data.php', // this is the path to the above PHP script
        data: {
            filename: filename,
            filedata: filedata
        }
    });
};

var IDsub = Date.now()
var dataLog = {
    type: 'html-keyboard-response',
    stimulus: " ",
    trial_duration: 100,
    on_finish: function (data) {
        var data = jsPsych.data.get()
        if (file_name == null) {
            file_name = "WM_visual_array_" + partN + "_" + IDsub.toString() + ".csv"
        } else {
            file_name += ".csv"
        }
        if (local) {
            data.localSave('csv', file_name)
        } else {
            saveData(file_name, data.csv());
        }
    }
}

var demo_procedure = {
    timeline: [fixation, reward, fixation, recall, feedback],
    repetitions: 1
}

var test_procedure = {
    timeline: [fixation, reward, fixation, recall, feedback],
    repetitions: 1
}

var full_procedure = {
    timeline: [instructions, demo_procedure, exp_instructions, test_procedure]
}
const getAssetsFile = (url) => {
    return new URL(`${url}`, import.meta.url).href
}
var images = [getAssetsFile('../img/blue.png'), getAssetsFile('../img/white.png'), getAssetsFile('../img/black.png'), getAssetsFile('../img/yellow.png'), getAssetsFile('../img/green.png'), getAssetsFile('../img/red.png'),
getAssetsFile('../img/purple.png'), getAssetsFile('../img/instructions.png')
]

var timeline = [p_details]

timeline.push({
    type: 'fullscreen',
    fullscreen_mode: true
});

timeline.push(full_procedure)

timeline.push({
    type: 'fullscreen',
    fullscreen_mode: false
});
timeline.push(dataLog)
timeline.push(conclusion)


jsPsych.init({
    timeline: timeline,
    preload_images: images,
    on_finish: function () {
        jsPsych.data.displayData(); // comment out if you do not want to display results at the end of task
    }
});
</script>
